<template>
    <div id="adminList">
        <el-row type="flex" :gutter="20" justify="start">
            <!-- <el-col :span="1.5">
                <el-button size="mini" type="primary" @click="handleSave">新增</el-button>
            </el-col> -->
            <el-col :span="2">
                <el-button size="mini" type="danger" @click="handleDelByIds">批量删除</el-button>
            </el-col>
            <el-col :span="8">
                <el-input v-model="search.name" size="mini" placeholder="输入帖子内容搜索"
                    @keyup.enter.native="handleSearch()" />
            </el-col>
            <el-col :span="2">
                <el-button size="mini" type="primary" @click="handleSearch">搜索</el-button>
            </el-col>
        </el-row>

        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" rowKey="userId"
            ref="userTable">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" width="50">
            </el-table-column>
            <el-table-column label="用户id" prop="userid">
            </el-table-column>
            <el-table-column label="帖子类型id" prop="lunchType">
            </el-table-column>
            <el-table-column label="帖子标签id" prop="lunchLabel">
            </el-table-column>
            <el-table-column label="帖子内容" prop="lunchCont" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column label="发帖时间" prop="lunchtime">
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination hide-on-single-page="true" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            background :current-page.sync="pageInfo.page" :page-size="pageInfo.pageSize"
            :page-sizes="pageInfo.pageSizes" layout="->,prev, pager, next,sizes, jumper,total" :total="pageInfo.total">
        </el-pagination>
    </div>
</template>
<script>

import { page, removeByIds } from '@/api/lunchApi';
const options = {
    data() {
        return {
            tableData: [],
            search: {
                name: '',
                page: 1,
                pageSize: 10,
            },
            pageInfo: {
                total: 0,
                pageSizes: [5, 10, 15, 20]
            },
            showEditor: false,
            typeEditor: 0,//0 添加 else 修改
            formData: {},//要修改的用户对象
            selectedIds: ""
        }
    },
    created() {
        this.init();
    },
    methods: {
        tableRowClassName({ rowIndex }) {
            if (rowIndex % 2 === 1) {
                return 'success-row';
            }
            return ''
        },

        init() {
            this.getPageInfo();
        },
        changeRows(rows) {
            // console.log(val);
            let ids = []
            rows.forEach(row => {
                ids.push(row.adminId);
            });
            this.selectedIds = ids.join();
            // console.log(ids.join());
        },
        handleSizeChange(val) {
            //页大小改变
            this.search.page = 1;
            this.search.pageSize = val;
            this.getPageInfo();

        },
        handleCurrentChange(val) {
            //当前页改变
            this.search.page = val;
            this.getPageInfo();
        },
        handleEdit(index, row) {
            // console.log(index, row);
            this.formData = row;
            this.typeEditor = 1;
            this.showEditor = true;
        },
        handleDelete(index, row) {
            let that = this;
            this.$confirm(`确认删除此用户？: ${row.nickname}`, "删除用户", "error")
                .then(() => {
                    //调用删除函数
                    that.deleteByIds(row.userid);
                })
                .catch(() => { });
        },
        handleSearch() {
            this.getPageInfo();
        },
        handleDelByIds(ids) {
            this.$confirm("确认批量删除用户？", "批量删除")
                .then(() => {
                    this.deleteByIds(ids);
                }).catch(() => { })
        },
        getPageInfo() {
            const that = this;
            page(this.search).then((resp) => {
                // console.log(resp.data.data.records);
                that.tableData = resp.data.data.records;
                that.pageInfo.total = resp.data.data.total;
                // console.log(resp.data.data.total);
            }).catch(err => {
                console.log(err);
            })
        },
        deleteByIds(ids) {
            removeByIds(ids).then(resp => {
                console.log(resp.data);
                if (resp.data.code === 1) {
                    this.$message.success("删除用户成功");
                } else {
                    this.$message.error("删除用户失败");
                }
            })
            this.getPageInfo();
        }
    }
}
export default options;
</script>

<style>
.el-table .success-row {
    background: #f0f9eb;
}

.el-tooltip__popper {
    max-width: 300px;
    /*修改宽度*/
    font-size: 14px;
    background: #fff !important;
    color: #AAAAAA !important;
}
</style>